<template>
  <view class="container">
    <swiper class="swiper">
      <swiper-item v-for="(items, index1) in swiperList" :key="index1">
        <up-grid>
          <up-grid-item
            :customStyle="{
              width: 220 + 'rpx',
              height: 220 + 'rpx',
              boxShadow: '5px 5px 10px rgba(0, 0, 0, 0.2)',
              borderRadius: '10%',
              backgroundColor: 'rgba(255, 255, 255, 0.8)',
            }"
            v-for="(item, index) in items"
            :index="index"
            :key="item.id"
            @click="changePagePath(item)"
          >
            <view class="con_img"><image :src="item.imagePath" /></view>
            <text class="grid-text">{{ item.text }}</text>
          </up-grid-item>
        </up-grid>
      </swiper-item>
    </swiper>
  </view>
  <tabbar />
</template>

<script setup lang="ts">
  import type { menuItemType } from '@/types/menuItem';
  import { ref } from 'vue';

  // 创建响应式数据
  const swiperList = ref<Array<Array<menuItemType>>>([
    [
      {
        id: 1,
        imagePath:
          'http://113.45.143.73:9050/meal-images/2024-11/13/f548cae9-0d65-493e-99f5-4501e7b284bd.png',
        pagePath: '/pages/meal/meal',
        text: '点饭',
      },
      {
        id: 2,
        imagePath:
          'http://113.45.143.73:9050/meal-images/2024-11/13/0715d00d-0e2d-45d2-88a0-b65e01774afc.png',
        pagePath: '/pages/insert/insert',
        text: '添加菜单',
      },
      {
        id: 3,
        imagePath:
          'http://113.45.143.73:9050/meal-images/2024-11/13/f933097d-cb43-455d-9791-9e72c5d72a1e.png',
        pagePath: '/pages/manage/manage',
        text: '菜单管理',
      },
    ],
  ]);

  function changePagePath(item: menuItemType) {
    uni.navigateTo({
      url: item.pagePath,
    });
  }
</script>

<style lang="scss">
  page {
    background-image: url(http://113.45.143.73:9050/meal-images/2024-11/13/1035df6b-f48d-40ad-ba13-5c8125281c78.png);
    background-size: 100% 100%;
  }
  .container {
    width: 100%;
    position: absolute;
    bottom: 150rpx;
  }
  .swiper {
    height: 720rpx;

    .con_img {
      width: 60rpx;
      height: 60rpx;

      image {
        width: inherit;
        height: inherit;
      }
    }
  }
  .grid-text {
    font-size: 14px;
    color: #909399;
    padding: 10rpx 0 20rpx 0rpx;
    /* #ifndef APP-PLUS */
    box-sizing: border-box;
    /* #endif */
  }
</style>
